<template>
	<view class="member-info">
		<view class="title bold" v-if="result_length != ''">我的球友({{result_length}})人</view>

		<u-index-list :index-list="indexList" :topHeight="50">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
				<!-- #endif -->

				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
					<!-- #endif -->
					<!-- <view class="list-cell flex-align" v-for="cell in item"> -->
					<view class="list-cell flex-align" v-for="(item1, index1) in item" :key="index1"
						v-if="ifnav == '' ">
						<!-- <u-avatar :src="item1.avatar" size="90rpx"></u-avatar> -->
						<u-avatar :src="item1.avatar" size="90rpx" v-if="item1.avatar != ''"></u-avatar>
						<u-avatar :src="avatarDemo" size="90rpx" v-else></u-avatar>
						<view class="right flex-grow-1">
							<view class="name">{{ item1.name }}</view>
							<view class="phone">{{ item1.phone }}</view>
						</view>
						<view class="right flex-grow-1">
							<image style="width: 30rpx; height: 30rpx;margin-left: 50%;" :src="bianji" mode=""
								@click="bfEdit(item1)"></image>
							<image style="width: 30rpx; height: 30rpx;margin-left: 10%;" :src="shanchu" mode=""
								@click="bfDel(item1)"></image>
						</view>
					</view>
					<view class="list-cell flex-align" v-for="(item1, index1) in item" :key="index1"
						v-if="ifnav != '' ">
						<!-- <u-avatar :src="item1.avatar" size="90rpx"></u-avatar> -->
						<u-avatar :src="item1.avatar" size="90rpx" v-if="item1.avatar != ''"
							@click="card_userslist(item1)"></u-avatar>
						<u-avatar :src="avatarDemo" size="90rpx" v-else @click="card_userslist(item1)"></u-avatar>
						<view class="right flex-grow-1" @click="card_userslist(item1)">
							<view class="name">{{ item1.name }}</view>
							<view class="phone">{{ item1.phone }}</view>
						</view>
						<view class="right flex-grow-1">
							<image style="width: 30rpx; height: 30rpx;margin-left: 50%;" :src="bianji" mode=""
								@click="bfEdit(item1)"></image>
							<image style="width: 30rpx; height: 30rpx;margin-left: 10%;" :src="shanchu" mode=""
								@click="bfDel(item1)"></image>
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>

		<view class="bottom-add-btn">
			<u-button text="添加球友" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				avatarDemo: this.$https.assetsPath + '98211cea862fd8ddd0c3a8ad53dee51d0fb225bc.png',
				result_length: '',
				itemArr: [],
				assetsPath: this.$https.assetsPath,
				bianji: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7886aba3ece8aae3b489b1944b48572a4f092c41.png',
				shanchu: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fe85ef51643a187a6090a929b34e93738e12e365.png',
				ifnav: ''
			}
		},
		onLoad(options) {
			console.log(options, '123')
			this.ifnav = options.nav
			this.getMyFriends()
		},
		onShow() {
			this.getMyFriends()
		},
		methods: {
			card_userslist(item1) {
				uni.removeStorage({
					key: 'id',
					success: function(res) {}
				}); +
				uni.removeStorage({
					key: 'name',
					success: function(res) {}
				});
				uni.removeStorage({
					key: 'pyphone',
					success: function(res) {}
				});
				uni.setStorageSync('id', item1.friend_id)
				uni.setStorageSync('name', item1.name)
				uni.setStorageSync('pyphone', item1.phone)
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})

			},
			// 获取我的球友
			async getMyFriends(item1) {
				let params = {
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					app_id: this.$https.weixinAppId,
					type: 1
				}
				let res = await venues.getFriends(params)
				if (res.code === 1) {
					this.itemArr = res.data.data
					this.result_length = res.data.num
				}
			},


			bfDel(item1) {
				let that = this
				uni.showModal({
					title: '删除',
					content: '是否确定删除！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								project_id: getApp().globalData.projectId,
								app_id: that.$https.weixinAppId,
								id: item1.id,
							}
							console.log(params, '2121')
							venues.DelFriend(params).then(res => {
								if (res.code == 1) {
									that.getMyFriends()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			bfEdit(item1) {
				console.log(item1, '132')
				uni.navigateTo({
					url: './add/add?id=' + item1.id +
						"&friend_name=" +
						item1.name +
						"&friend_phone=" +
						item1.phone +
						"&type=" + 1 +
						"&phone=" + item1.phone +
						"&avatar=" + item1.avatar
				});
			},
			add() {
				uni.navigateTo({
					url: './add/add'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-info {
		padding: 0 34rpx;

		/deep/.u-index-list {
			scroll-view {
				height: calc(100vh - 220rpx - env(safe-area-inset-bottom));
				;
			}
		}

		.title {
			font-size: 32rpx;
			height: 100rpx;
			padding-top: 40rpx;

			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 28rpx;
				background-color: #0072ff;
				margin-top: 2rpx;
				margin-right: 22rpx;
			}
		}

		.list-cell {
			padding: 24rpx 0;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 110rpx;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: #f2f2f2;
			}

			.right {
				margin-left: 20rpx;
			}

			.phone {
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 10rpx;
				color: #BEBEBE;
			}
		}
	}
</style>